<template>
  <div class="login">
    <div class="box">
      <h3>用户登录</h3>
      <el-form :model="loginForm" ref="loginForm"  :rules="loginFormRules" label-width="80px" class="mima">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入内容" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入内容" show-password autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="denglu()">登录</el-button>
      <el-button type="info" @click="resetForm('loginForm')">重置
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: "admin",
        password: "admin",
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    // 点击重置按钮，重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 登录按钮
    denglu() {
      const postData = this.qs.stringify({
        username: this.loginForm.username,
        password: this.loginForm.password,
      });
      this.axios({
        method: "POST",
        url: "/api/manage/user/login.do",
        data: postData,
      }).then((res) => {
        if (res.data.status !== 0) return this.$message.error(res.data.msg);
        this.$message.success(res.data.msg);
        // 1.将登录之后的 token ，保存到客户端的sessionStorage中
        // 1.1 项目中出了登录之外其他的API接口，必须在登录之后才能访问
        // 1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        window.sessionStorage.setItem("token", res.data.data.username);
        // console.log(window.sessionStorage.getItem("token"));
        // 2.通过编程式导航跳转到后台主页，路由地址是 /Home
        this.$router.push("/Home");
      });
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  background-color: #2b4b6b;
}

.box {
  width: 450px;
  height: 350px;
  background-color: #fff;
  border-radius: 3px;
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #d8d9de;
  transform: translate3d(-50%, -50%, 0);
}

.box h3 {
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #d8d9de;
}

.box li {
  width: 433px;
  height: 40px;
  margin-top: 30px;
}

.box li span {
  display: block;
  float: left;
  line-height: 40px;
  width: 70px;
  text-align: right;
}

.mima {
  margin-top: 30px;
  height: 35px;
  padding-right: 70px;
  box-sizing: border-box;
}

.box button {
  width: 300px;
  height: 40px;
  color: #fff;
  border: none;
  text-align: center;
  margin-left: 79px;
  margin-top: 30px;
  border-radius: 3px;
}
</style>
